/**
* @description: 临时工单 ==> 临时工单监控 ==> 临时工单进度
**/
<template>
<view class="task-monitor-main">
  <nav-bar class="header" back title="工单详情" @goBack="goBack"/>
  <view class="main-container">
    <!--基本信息-->
    <plateTitle title="基本信息" class="plate-title-1"/>
    <view class="base-info-container">
      <van-cell-group>
        <van-cell v-for="(item,index) in baseInfoData" :key="index" :title="item.title" :value="item.value" />
      </van-cell-group>
    </view>
  
    <!--审批进度-->
    <plateTitle title="审批进度" class="plate-title-2">
      <div class="plate-title-right" v-if="approvalData.taskState === '-1' || approvalData.taskState === '0'">{{ taskStatus }}</div>
    </plateTitle>
    <view class="approval-info-container">
      <van-steps direction="vertical"
                 :active="approvalActive"
                 active-color="#417adc"
                 inactive-color="#417adc"
                 active-icon="circle"
                 inactive-icon="circle">
        <van-step>
          <p><span>{{ approvalData.operName }}</span><span>发起人</span></p>
          <p style="color: #417adc">发起审批</p>
          <p>{{ approvalData.receiveTime }}</p>
        </van-step>
        <van-step>
          <p><span>{{ approvalData.approvalOperName }}</span><span>审批人</span></p>
          <p :style="{color: approvalColor()}">{{ approvalData.approvalStateName }}</p>
          <p>{{ approvalData.approvalTime }}</p>
          <p class="opinion" v-if="approvalData.approvalState !== '0'">
            <span>审批意见：</span>
            <span>{{ approvalData.approvalRemark }}</span>
          </p>
        </van-step>
      </van-steps>
    </view>
    
    <!--巡视进度-->
    <plateTitle title="巡视进度" class="plate-title-3" >
      <span class="plate-title-right" :style="{color: statusColor(taskState)}" @click="toEquipList()">
        {{ taskStateName }}（{{ taskProgressLeft }}/{{taskProgressRight}}）
        <van-icon name="arrow" />
      </span>
    </plateTitle>
    <!--  3 已完工  -->
    <view class="finish" v-if="taskState === '99'" v-for="(ite,index) in progessList" :key="index">
      <view class="progesss-top">
        <view class="progess-left">
          <img src="../../../../static/img/equipment.png" alt="" v-if="ite.DET_TYPE_NAME === '通信设备'">
          <img src="../../../../static/img/opticalCable.png" alt="" v-if="ite.DET_TYPE_NAME === '通信光缆'">
          <img src="../../../../static/img/powerSupply.png" alt="" v-if="ite.DET_TYPE_NAME === '通信电源'">
          <text class="progess-title">{{ ite.DET_TYPE_NAME }}</text>
        </view>
        <view class="progess-right">{{ite.JD}} ({{ite.YWC }}/{{ite.TOTAL}})</view>
      </view>
      <hr class="progess-hr">
      <view class="progesss-bottom xsry">
        <text class="progress-title">巡视人员：</text>
        <text class="progress-main">{{ite.XSRY}}</text>
      </view>
      <view class="progesss-bottom">
        <text class="progress-title">巡视设备数：</text>
        <text class="progress-main">{{ite.TOTAL}}</text>
        <text class="progress-title ml">异动设备数：</text>
        <text class="progress-main colorNum">{{ite.BCZ + ite.XZ + ite.GX}}</text>
      </view>
      <view class="task-bottom">
        <text class="task-box add-box">新增：{{ite.XZ}}</text>
        <text class="task-box update-box">更新：{{ite.GX}}</text>
        <text class="task-box consistent-box">一致：{{ite.YZ}}</text>
        <text class="task-box nonentity-box">不存在：{{ite.BCZ}}</text>
      </view>
    </view>
    <!-- 1 未执行/  2  执行中  -->
    <view class="noExecute" v-if="taskState === '2' || taskState === '3'" v-for="(item,index) in progessList" :key="index">
      <view class="progesss-top">
        <view class="progess-left">
          <img src="../../../../static/img/equipment.png" alt="" v-if="item.DET_TYPE_NAME === '通信设备'">
          <img src="../../../../static/img/opticalCable.png" alt="" v-if="item.DET_TYPE_NAME === '通信光缆'">
          <img src="../../../../static/img/powerSupply.png" alt="" v-if="item.DET_TYPE_NAME === '通信电源'">
          <text class="progess-title">{{ item.DET_TYPE_NAME }}</text>
        </view>
        <view class="progess-right" :style="{color: item.JD === '未完成' ? '#FF4355' : '#41DC83'}">{{item.JD}} ({{item.YWC }}/{{item.TOTAL}})</view>
      </view>
      <hr class="progess-hr">
      <view class="progesss-bottom">
        <text class="progress-title">巡视人员：</text>
        <text class="progress-main">{{item.XSRY}}</text>
      </view>
    </view>
  </view>
</view>
</template>

<script>
import navBar from "../../../../components/common/nav-bar.vue";
import plateTitle from "../../../../components/business/plateTitle";
import moment from 'moment'
import {mapGetters} from "vuex";
export default {
  components: { navBar, plateTitle },
  name: "taskMonitor",
  data() {
    return {
      baseInfoData: [],
      approvalData: {},
      approvalActive: 0,
      approvalColor: () => {
        // if (this.approvalData.approvalState === "发起审批") return "#417ADC";
        if (this.approvalData.approvalState === "1") return "#41DC83"; // 通过
        if (this.approvalData.approvalState === "0") return "#FF4355"; // 审批中
        if (this.approvalData.approvalState === "-1") return "#FFAD0E";// 拒绝
      },
      taskProgressLeft: 0,
      taskProgressRight: 0,
      statusColor: (taskState) => {
        if(taskState === "99") return "#41DC83";
        if(taskState === "2") return "#FF4355";
        if(taskState === "3") return "#FFAD0E";
      },
      progessList:[],
      taskState:'', //携带到巡视设备列表 做返回参数
      taskStateName:'', //携带到巡视设备列表 做返回参数
      taskId:'', //携带到巡视设备列表 做返回参数
      neId:'',
    }
  },
  onLoad(options) {
    this.taskState = options.taskState
    this.taskId = options.objId
    this.taskStateName = options.taskStateName
    this.getInFo();
    this.getTemporaryDetails();
  },
  computed: {
    ...mapGetters(['userData', 'roleAuth'])
  },
  methods: {
    goBack() {
      if(['TOUR_GROUP'].includes(this.roleAuth)) {
        uni.navigateTo({
          url: '/pages/workBench/temporaryTask/taskMonitor/patrolTaskMonitor'
        })
      }else {
        uni.navigateTo({
          url: '/pages/workBench/taskMonitor/taskMonitor'
        })
      }
    },
    // 获取基本信息
    getInFo() {
      this.$api.getTaskDetails({task_state:this.taskState,task_id:this.taskId}).then(res => {
        this.neId = res.data.taskMsg.OBJ_ID
        //计划开工时间
        this.baseInfoData = [
          {
            title: "工单名称",
            value: res.data.taskMsg.NAME
          },
          {
            title: "巡视站点名称",
            value: res.data.taskMsg.TASK_SITE_NAME
          },
          {
            title: "计划巡视时间",
            value: moment(res.data.taskMsg.JHXSKSSJ).format('YYYY-MM-DD HH:mm') +'～'+ moment(res.data.taskMsg.JHXSJSSJ).format('YYYY-MM-DD HH:mm')
          },
          {
            title: "巡视负责人",
            value: res.data.taskMsg.XSFZR
          },
          {
            title: "备注",
            value: res.data.taskMsg.REMARK
          },
        ]
        this.progessList = res.data.task_details.map(item => {
          this.taskProgressLeft += item.YWC
          this.taskProgressRight += item.TOTAL
          return item
        })
      })
    },
    // 获取审批详情
    getTemporaryDetails() {
      this.$api.temporaryDetails({objId: this.taskId}).then(res => {
        // this.approvalData = {
        //   operName: res.data.operName, // string	发起人名称
        //   receiveTime: res.data.receiveTime, // object	发起时间
        //   approvalTime: res.data.approvalTime, // object	发起时间
        //   approvalOperName: res.data.approvalOperName, // object	审批人名称
        //   approvalState: res.data.approvalState, // string	审批状态
        //   approvalStateName: res.data.approvalStateName, // string	审批状态名称
        //   approvalRemark: res.data.approvalRemark, // string	审批意见
        //   taskState: res.data.taskState, // string	任务状态（空字符，0已作废，-1已撤销）
        //   taskStateName: res.data.taskStateName, // string	空字符，已作废，已撤销
        // };
        this.approvalData = res.data;
        if(res.data.approvalState !== '0') {
          this.approvalActive = 1;
        }
      })
    },

    toEquipList() {
      // 跳转巡视设备列表
      uni.navigateTo({
        url: `/pages/workBench/temporaryTask/taskMonitor/patrolEquipment?id=${this.neId}&taskState=${this.taskState}&objId=${this.taskId}&taskStateName=${this.taskStateName}`
      })
    }
  }
};
</script>

<style scoped lang="scss">
.task-monitor-main {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  
  .main-container {
    min-height: calc(100vh - #{px2vh(283)});
    padding: px2vh(30) px2vw(30) px2vh(90) px2vw(30);
    background-color: #F8F8F8;
    /deep/.van-cell {
      font-size: px2vw(42);
    }
    
    .plate-title-1 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
  
    .base-info-container, .approval-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
      
      /deep/.van-cell__title {
        color: #666;
      }
      /deep/.van-cell__value {
        color: #333;
      }
    }
  
    .plate-title-2 {
      margin-top: px2vh(60);
      margin-bottom: px2vh(27);
    
      .plate-title-right {
        transform: rotateZ(30deg);
        color: #808080;
      }
    }
    .approval-info-container {
      .van-steps {
        .van-step.van-step--process {
          /deep/.van-icon::before {
            border-radius: 50%;
            color: #417adc;
            background-color: #417adc;
          }
        }
        .van-step {
          /deep/.van-icon::before {
            border: 2px;
            border-radius: 50%;
            color: #417adc;
            background-color: #fff;
          }
          p {
            margin-bottom: 4px;
            color: #ababab;
          }
          p:nth-child(1) {
            display: flex;
            justify-content: space-between;
            //width: px2vw(300);
            color: #333;
          }
          .opinion {
            display: flex;
            span:nth-child(1) {
              min-width: 70px;
            }
          }
        }
      }
    }
  
    .plate-title-3 {
      margin-top: px2vh(60);
      margin-bottom: px2vh(27);
      
      .plate-title-right {
        line-height: px2vh(54);
        font-size: px2vw(40);
        font-weight: bold;
        
        .van-icon {
          vertical-align: middle;
          color: #9A9A9A;
        }
      }
    }

    .noExecute {
      width: px2vw(1020);
      //height: px2vh(313);
      background: #fff;
      margin-bottom: px2vh(30);
      padding-bottom: px2vh(30);
      border-radius: 10px;
      .progesss-top {
        width: px2vw(920);
        height: px2vh(172);
        margin-left: px2vw(50);
        display: flex;
        align-items: center;
        justify-content: space-between;
  
        .progess-left {
          display: flex;
          align-items: center;
    
          img {
            width: px2vw(68);
            height: px2vw(68);
            //margin-top: px2vh(55);
            //float: left;
          }
    
          .progess-title {
            color: #666;
            //float: left;
            font-size: px2vw(42);
            margin-left: px2vw(20);
            //margin-top: px2vh(58);
            //line-height: px2vh(62);
          }
        }
        .progess-right {
          //width: px2vw(258);
          font-size: px2vw(42);
          //line-height: px2vh(62);
          //margin-top: px2vh(58);
          //float: right;
        }
        .processColor {
          color: #FF4355;
        }
        .processColor2 {
          color: #FFAD0E;
        }
      }
      .progess-hr {
        width: px2vw(920);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
      }
      .progesss-bottom {
        width: px2vw(920);
        margin-left: px2vw(50);
        //height: px2vh(138);
        font-size: px2vw(36);
        display: flex;
        padding: px2vh(30) 0 0;
        .progress-title {
          width: px2vw(190);
          display: inline-block;
          //margin-top: px2vh(58);
          color: #666;
        }
        .progress-main {
          flex: 1;
          display: inline-block;
          //margin-top: px2vh(58);
          color: #333;
        }
      }
    }
    .finish {
      width: px2vw(1020);
      //height: px2vh(500);
      background: #fff;
      margin-bottom: px2vh(30);
      padding-bottom: px2vh(30);
      border-radius: 10px;
      .progesss-top {
        width: px2vw(920);
        height: px2vh(172);
        margin-left: px2vw(50);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .progess-left {
          display: flex;
          align-items: center;
  
          img {
            width: px2vw(68);
            height: px2vw(68);
            //margin-top: px2vh(55);
            //float:left;
          }
  
          .progess-title {
            color: #666;
            //float: left;
            font-size: px2vw(42);
            margin-left: px2vw(20);
            //margin-top: px2vh(58);
            //line-height: px2vh(62);
          }
        }
        .progess-right {
          //width: px2vw(258);
          font-size: px2vw(42);
          //line-height: px2vh(62);
          //margin-top: px2vh(58);
          //float: right;
          color: #41DC83;
        }
        //.processColor {
        //  color: #FF4355;
        //}
        //.processColor2 {
        //  color: #FFAD0E;
        //}
      }
      .progess-hr {
        width: px2vw(920);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
      }
      .progesss-bottom {
        width: px2vw(920);
        margin-left: px2vw(50);
        font-size: px2vw(36);
        .progress-title {
          display: inline-block;
          margin-top: px2vh(44);
          color: #666;
        }
        .progress-main {
          display: inline-block;
          margin-top: px2vh(44);
          color: #333;
        }
        .ml {
          margin-left: px2vw(217);
        }
        .colorNum {
          color: #FF4355;
        }
      }
      .progesss-bottom.xsry {
        display: flex;
        .progress-title {
          width: px2vw(190);
        }
        .progress-main {
          flex: 1;
        }
        .ml {
          margin-left: px2vw(217);
        }
        .colorNum {
          color: #FF4355;
        }
      }
      .task-bottom {
        width: px2vw(920);
        height: px2vh(66);
        margin-left: px2vw(50);
        margin-top: px2vh(40);
        font-size: px2vw(36);
        .task-box {
          display: inline-block;
          width: px2vw(206);
          height: px2vh(60);
          line-height: px2vh(62);
          font-size: px2vw(32);
          text-align: center;
        }
        .add-box {
          color: #41DC83;
          background: rgba(65,220,131, 0.1);
        }
        .update-box {
          color: #FFAD0E;
          margin-left: px2vw(32);
          background: rgba(255,180,0, 0.1);
        }
        .consistent-box {
          color: #417ADC;
          margin-left: px2vw(32);
          background: rgba(65,122,220, 0.1);
        }
        .nonentity-box {
          color: #FF7070;
          margin-left: px2vw(32);
          background: rgba(255,112,112, 0.1);
        }
      }
    }
    
  }
}
</style>